@using CleanArchitecture.Blazor.Application.Features.Visitors.DTOs
@using CleanArchitecture.Blazor.Application.Features.Visitors.Queries.Pagination
@using CleanArchitecture.Blazor.Application.Features.Visitors.Queries.Search
@using System.Globalization
@inject IStringLocalizer<Visitors> L
@inherits MudComponentBase
<div class="d-flex flex-column">
    <MudPaper Class="pa-4 mt-4">
        <MudTextField @bind-Value="_keyword" Label="@L["Search for visitor's email or phone number."]" Variant="Variant.Outlined" Adornment="Adornment.End" AdornmentIcon="@Icons.Filled.Search" AdornmentColor="MudBlazor.Color.Primary" OnAdornmentClick="SearchPendingVisitor" />
    </MudPaper>
    <MudPaper Class="mt-4">
        <MudList Clickable="true">
            <MudListSubheader>
                @L["Pending Approval"] (@_list.Count)
            </MudListSubheader>
            @foreach (var item in _list)
            {
                <MudListItem OnClick="@(()=>Click(item))">
                    <div class="d-flex flex-row flex-grow-1 gap-4">
                        <div class="d-flex flex-column flex-grow-1">
                            <MudText Typo="Typo.body1">@item.Name</MudText>
                            <MudText Typo="Typo.body2">@item.CompanyName</MudText>
                        </div>
                        <div class="d-flex flex-column flex-grow-1">
                            <MudText Typo="Typo.body1">@item.Purpose</MudText>
                            <MudText Typo="Typo.body2">@item.Comment</MudText>
                        </div>
                        <div class="d-flex flex-column flex-grow-0">
                            <MudText Typo="Typo.body1">@item.ExpectedDate?.ToString("MM/dd",CultureInfo.InvariantCulture)</MudText>
                            @if (item.ExpectedTime is not null)
                            {
                                <MudText Typo="Typo.body2">@(new DateTime().Add(item.ExpectedTime.Value).ToString("hh:mm tt",CultureInfo.InvariantCulture))</MudText>
                            }
                        </div>
                    </div>
                </MudListItem>
            }

        </MudList>
    </MudPaper>
</div>

@code {
    private string? _keyword { get; set; }
    [Inject]
    private ISender _mediator { get; set; } = default!;
    private List<VisitorDto> _list { get; set; } = new();
    [Parameter]
    [EditorRequired]
    public EventCallback<VisitorDto> SelectChanged { get; set; }
    protected override async Task OnInitializedAsync()
    {
        await SearchPendingVisitor();
    }
    public async Task SearchPendingVisitor()
    {
        _list = await _mediator.Send(new SearchPendingApprovalVisitorsQuery(_keyword));
        StateHasChanged();
    }
    private async Task Click(VisitorDto visitor)
    {
        await SelectChanged.InvokeAsync(visitor);
    }
    
}
